<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>实时操作-选择某点</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
    <style type="text/css">

    </style>
</head>
<body>
<!---->
<div style="margin: 5px;">
    <table class="layui-hide" id="selectCurrentRouteTable" lay-filter="selectCurrentRouteTable"></table>
    <div class="layui-form-item" style=" width: 40%; height: 50%; margin: 10px 30% 0 30%;">
        <div class="layui-input-block">
            <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="selectRouteConfirm">确定选择该点</button>
            <button type="button" class="layui-btn layui-btn-primary" id="selectRouteBack">取消</button>
        </div>
    </div>
</div>

<!--新增航线-->
<div class="layui-row" id="addRouteForm" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px; margin-right: 20px">
            <!--主键id-->
            <input type="text" id="s_id" name="id" hidden="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style='color: red;'>*</span> 纬度类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="latitudeType"  lay-filter="latitudeType"
                           checked value="N" title="北纬">
                    <input type="radio" name="latitudeType" lay-filter="latitudeType"
                           value="S" title="南纬">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style='color: red;'>*</span> 纬度</label>
                <div class="layui-input-block">
                    <input type="text" id="latitudeDegree" name="latitudeDegree" required lay-verify="required"
                           autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                    <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                    <input type="text" id="latitudeMinute" name="latitudeMinute"
                           autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                    <div style="float:left;line-height: 38px;">&nbsp;分</div>
                    <div style="float:left;line-height: 38px;">（范围: 0-90度(整数), 0-60分(最多5位小数),1度=60分）</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style='color: red;'>*</span> 经度类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="longitudeType" lay-filter="longitudeType"
                           checked value="E" title="东经">
                    <input type="radio" name="longitudeType" lay-filter="longitudeType"
                           value="W" title="西经">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style='color: red;'>*</span> 经度</label>
                <div class="layui-input-block">
                    <input type="text" id="longitudeDegree" name="longitudeDegree" required lay-verify="required"
                           autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                    <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                    <input type="text" id="longitudeMinute" name="longitudeMinute"
                           autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                    <div style="float:left;line-height: 38px;">&nbsp;分</div>
                    <div style="float:left;line-height: 38px;">（范围: 0-180度(整数), 0-60分(最多5位小数),1度=60分）</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">速度</label>
                <div class="layui-input-block">
                    <input type="text" id="s_speed" name="speed" required
                           autocomplete="off"
                           placeholder="单位节: 1节=1海里/小时=1.852公里/小时=1.852千米/小时" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn  layui-btn-submit " lay-submit=""
                            lay-filter="addRouteConfirm">保存
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" id="addRouteBack">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/html" id="selectToolBar">
    <div class="layui-btn-container">
        <!--shiro:hasPermission="/manageVoucher/assignAccountAdd"-->
        <button type="button" class="layui-btn layui-btn-sm" lay-event="addRoute" >新增航线</button>
    </div>
</script>

<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">

<script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

<!--序号自增-->
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    layui.use(['jquery', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        // 设定航线表(不分页)
        table.render({
            elem: '#selectCurrentRouteTable'
            , url: ctx + '/navigation/getCurrentRouteList'
            , method: 'post'
            , contentType: 'application/json'
            , toolbar: '#selectToolBar' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: false //去掉右上角的打印等按钮
            , title: null
            , loading: true //显示加载条
            , height: 'full-65' //固定表头，以及设置表格高度
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {title: '序号', templet: '#xuhao', align: 'center', width: 60},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'latitude', title: '纬度值', hide: true},
                    {field: 'latitudeType', title: '纬度类型', hide: true},
                    {
                        field: 'latitudeDesc', title: '纬度', align: 'center',
                        templet: function (d) {
                            if (d.latitude == null || d.latitude === '') {
                                return '';
                            }
                            if (d.latitudeType === 'N') {
                                return d.latitude + '/北纬';
                            } else if (d.latitudeType === 'S') {
                                return d.latitude + '/南纬';
                            } else {
                                return d.latitude;
                            }
                        }
                    },
                    {field: 'longitude', title: '经度值', hide: true},
                    {field: 'longitudeType', title: '经度类型', hide: true},
                    {
                        field: 'longitudeDesc', title: '经度', align: 'center',
                        templet: function (d) {
                            if (d.longitude == null || d.longitude === '') {
                                return '';
                            }
                            if (d.longitudeType === 'E') {
                                return d.longitude + '/东经';
                            } else if (d.longitudeType === 'W') {
                                return d.longitude + '/西经';
                            } else {
                                return d.longitude;
                            }
                        }
                    },
                    {field: 'speed', title: '速度', align: 'center'},
                    {field: 'routeState', title: '路线状态', align: 'center',
                         templet: function (d) {
                            var label = getLabel(DataType.RouteState, d.routeState);
                            if (d.routeState === 2) {
                                // 已发送
                                return "<span style='color: limegreen;'>" + label + "</span>"
                            } else if (d.routeState === 3) {
                                // 等待发送
                                return "<span style='color: cornflowerblue;'>" + label +  "</span>"
                            }
                            return label;
                    }
                },
                ]
            ]
            , page: false
            , limit: Number.MAX_VALUE // 数据表格默认全部显示
            , request: {
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.body.totalSize, //解析数据长度
                    "data": res.body //解析数据列表
                };
            }

        });

        /*设定航线的确认按钮*/
        form.on('submit(selectRouteConfirm)', function (massage) {
            // 获取选中的数据对象
            let checkDataList = table.checkStatus('selectCurrentRouteTable').data;
            if (checkDataList.length === 0) {
                layer.msg("请选择要设定的航线", {
                    time: 1000
                });
                return;
            }
            if (checkDataList.length > 1) {
                layer.msg("只需要选择一个航线点", {
                    time: 1000
                });
                return;
            }
            let selectId;
            $.each(checkDataList, function (index,value,array){
                selectId = value.id;
            });
            $.ajax({
                url: ctx + '/navigation/setCurrentSingleRoute',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(selectId),
                beforeSend: function () {
                    this.layerLogin = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerLogin);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 操作成功
                        layer.msg("操作成功");
                        // 延迟关闭
                        setTimeout(function(){
                            // 关闭所有弹窗
                            parent.layer.closeAll();
                            // 重新加载父窗口
                            window.parent.location.reload();
                        }, 330);
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (e) {
                    layer.msg("请求异常")
                }
            });
        });

        //头工具栏事件
        table.on('toolbar(selectCurrentRouteTable)', function (obj) {
            switch (obj.event) {
                //自定义头工具栏右侧图标 - 提示
                case 'addRoute': {
                    // 先清空数据
                    $("#s_id").val('');
                    $("#s_longitude").val('');
                    $("#s_latitude").val('');
                    $("#s_speed").val('');
                    // 新增的时候，默认选中东经，北纬
                    $("#s_longitudeType").val('E');
                    $("#s_latitudeType").val('N');

                    layer.open({
                        type: 1,
                        title: "新增航线",
                        area: ['60%', '90%'],
                        scrollbar: false, // 父页面不滚动
                        content: $("#addRouteForm")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    break;
                }
                default:
                    break;
            }
        });

        /**新增航线，点击确定按钮*/
        form.on('submit(addRouteConfirm)', function (massage) {
            // 经度的度
            var longitudeDegree = $('#longitudeDegree').val();
            var longitudeMinute = $('#longitudeMinute').val();
            var latitudeDegree = $('#latitudeDegree').val();
            var latitudeMinute = $('#latitudeMinute').val();
            if (!checkLongitudeDegreeFormat(longitudeDegree, longitudeMinute)) {
                return;
            }
            if (!checkLatitudeDegreeFormat(latitudeDegree, latitudeMinute)) {
                return;
            }
            // 经度
            var longitude = longitudeDegree + "°";
            if (!isBlank(longitudeMinute)) {
                longitude = longitude + longitudeMinute + "'";
            }
            // 纬度
            var latitude = latitudeDegree + "°";
            if (!isBlank(latitudeMinute)) {
                latitude = latitude + latitudeMinute + "'";
            }
            // 给对象添加新字段
            massage.field.longitude = longitude;
            massage.field.latitude = latitude;

            $.ajax({
                url: ctx + '/navigation/addModifyCurrentRoute',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(massage.field),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 关闭所有弹窗
                        layer.closeAll();
                        // 操作成功
                        layer.msg("操作成功", {
                            time: 1000
                        });
                        // 重新加载表格
                        table.reload('selectCurrentRouteTable');
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    layer.msg("请求失败！");
                }
            });
            return false;
        });

        // 取消按钮
        $("#addRouteBack").on('click', function () {
            layer.closeAll();
        });
        // 取消按钮
        $("#selectRouteBack").on('click', function () {
            parent.layer.closeAll();
        });

    });
</script>

</body>
</html>